<template>
    <div class="login-container">
        <el-table :data="list"
                  v-loading="listLoading"
                  element-loading-text="给我一点时间"
                  border fit
                  highlight-current-row
                  @selection-change="handleSelectionChange"
                  :reloadTable="reloadTable"
                  style="width: 100%">

            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column label="序号" width="65" align="center">
                <template scope="scope"> {{scope.row.id}} </template>
            </el-table-column>

            <el-table-column label="登录时间" width="180px" align="center">
                <template scope="scope"> {{scope.row.loginTime}} </template>
            </el-table-column>

            <el-table-column label="状态" width="110px" align="center">
                <template scope="scope">
                    <el-tag :type="scope.row.loginStatus | statusTagFilter">{{scope.row.loginStatus | statusFilter}}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="账号" width="130px" align="center">
                <template scope="scope"> {{scope.row.loginAccount}} </template>
            </el-table-column>

            <el-table-column label="姓名" width="110px" align="center">
                <template scope="scope"> {{scope.row.userName}} </template>
            </el-table-column>

            <el-table-column label="IP" width="100px" align="center">
                <template scope="scope"> {{scope.row.loginIp}} </template>
            </el-table-column>

            <el-table-column label="Token" align="center">
                <template scope="scope"> {{scope.row.token}} </template>
            </el-table-column>

            <el-table-column label="消息" align="center">
                <template scope="scope"> {{scope.row.loginMsg}} </template>
            </el-table-column>

            <el-table-column label="操作" width="90px" align="center">
                <template scope="scope">
                    <el-button size="small" type="primary" icon="document" @click="handleDetail(scope.row)">详情</el-button>
                </template>
            </el-table-column>

        </el-table>

        <div v-show="!listLoading" class="pagination-container">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="listQuery.page"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="listQuery.rows"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <el-dialog title="详情" :visible.sync="dialogDetailVisible">
            <table style="width: 600px">
                <tr>
                    <td style="width: 100px">操作人</td> <td>{{errorDetail.operator}}</td>
                </tr>
                <tr>
                    <td>操作时间</td> <td>{{errorDetail.operatorTime}}</td>
                </tr>
                <tr>
                    <td>请求IP</td> <td>{{errorDetail.detail.requestIp}}</td>
                </tr>
                <tr>
                    <td>请求URI</td> <td>{{errorDetail.detail.requestUri}}</td>
                </tr>
                <tr>
                    <td>请求URL</td> <td>{{errorDetail.detail.requestUrl}}</td>
                </tr>
                <tr>
                    <td>请求方式</td> <td>{{errorDetail.detail.requestMethod}}</td>
                </tr>
                <tr>
                    <td>浏览器标识</td> <td>{{errorDetail.detail.userAgent}}</td>
                </tr>
                <tr>
                    <td>终端类型</td> <td>{{errorDetail.detail.terminalType}}</td>
                </tr>
                <tr>
                    <td>平台类型</td> <td>{{errorDetail.detail.platformType}}</td>
                </tr>
                <tr>
                    <td>平台系统</td> <td>{{errorDetail.detail.platformOs}}</td>
                </tr>
                <tr>
                    <td>浏览器类型</td> <td>{{errorDetail.detail.browserType}}</td>
                </tr>
                <tr>
                    <td>浏览器版本</td> <td>{{errorDetail.detail.browserVersion}}</td>
                </tr>
                <tr>
                    <td>浏览器内核</td> <td>{{errorDetail.detail.browserKernel}}</td>
                </tr>
                <tr>
                    <td>创建时间</td> <td>{{errorDetail.detail.ctime}}</td>
                </tr>
                <tr>
                    <td>异常信息</td> <td>{{errorDetail.exceptionShort}}</td>
                </tr>
                <tr>
                    <td>异常详情</td> <td>{{errorDetail.exceptionDetail}}</td>
                </tr>

            </table>
        </el-dialog>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex'

    import { deletedLogin, fetchLoginObject, fetchLoginList } from '@/api/system/logger'
    export default {
        name: 'login',
        data() {
            return {
                list: null,
                total: null,
                listLoading: true,
                listQuery: {
                    page: 1,
                    rows: 10,
                    loginIp: '',
                    loginAccount: '',
                    orderby: 'ctime desc'
                },
                multipleSelection: [],
                dialogDetailVisible: false,

                errorDetail: {
                    operator: null,
                    operatorTime: null,
                    exceptionShort: null,
                    exceptionDetail: null,
                    detail: {
                        loggerType: null,
                        actionClass: null,
                        actionMethod: null,
                        actionParams: null,
                        actionDesc: null,
                        requestIp: null,
                        requestUri: null,
                        requestUrl: null,
                        requestMethod: null,
                        requestParameter: null,
                        userAgent: null,
                        terminalType: null,
                        platformType: null,
                        platformOs: null,
                        browserType: null,
                        browserVersion: null,
                        browserKernel: null,
                        ctime: null
                    }
                }
            }
        },
        created() {
            this.getList()
        },
        computed: {
            ...mapGetters([
                'loggerSelection'
            ]),
            reloadTable() {

                if(this.loggerSelection.query) {
                    this.listQuery = Object.assign(this.listQuery, this.loggerSelection.query)
                    this.listQuery.loginIp = this.loggerSelection.query.requestIp
                    this.listQuery.loginAccount = this.loggerSelection.query.account
                    this.$store.commit('LOGGER_SELECTION', {type: 'login', items: null, action: !this.loggerSelection.action, query: null})
                    this.getList()
                } else {
                    if(this.loggerSelection.action) {
                        this.$store.commit('LOGGER_SELECTION', {type: 'login', items: null, action: !this.loggerSelection.action})
                        this.getList()
                    }

                }

            }
        },
        filters: {
            statusFilter(status) {
                const statusArray = ['成功', '失败']
                return statusArray[status?--status:'']

            },
            statusTagFilter(status) {
                const statusArray = ['success', 'danger']
                return statusArray[status?--status:'']

            }
        },
        methods: {
            getList() {
                this.listLoading = true
                fetchLoginList(this.listQuery).then(response => {
                    this.list = response.data.list
                    this.total = response.data.total
                    this.listLoading = false
                })
            },
            handleSizeChange(val) {
                this.listQuery.rows = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.listQuery.page = val
                this.getList()
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                this.$store.commit('LOGGER_SELECTION', {type: 'login', items: this.multipleSelection, action: false})
            },
            handleDetail(row) {
                fetchLoginObject(row.id).then(response => {
                    this.dialogDetailVisible = true
                    this.errorDetail = Object.assign({}, response.data)
                })
            }
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>

</style>